<template>
  <div id="app">
     <ul class="zuopin">
        <li v-for="item in arr">
          <img :src="item.img" alt="" />
          <p>{{ item.title }}</p>
          <div class="tip">{{ item.tip }}</div>
          <div class="bot">
            <span>{{ item.pushtime }}</span>
            <span>{{ item.zan }}</span>
            <span>{{ item.pinglun }}</span>
          </div>
        </li>
      </ul>
  </div>
</template>

<script>
export default {
  props: ["username1",'arr'],
  data() {
    return {
    //  arr: [],
    };
  },
    mounted() {
    //   this.$axios('/opus').then((res)=>{
    //   this.arr=res.data
    // })
    },
};
</script>

<style scoped='true'>
*{
    margin: 0;
    padding: 0;
}
li{
    list-style-type:none
}
#app{
  min-height: 300px;
}
.zuopin,.caipu {
  width: 1080px;
  overflow: hidden;
}
.zuopin li {
  width: 277px;
  height: 435px;
  margin: 0 80px 30px 0;
  float: left;
  border: 1px solid #f3f3f3;
}
.zuopin li img {
  width: 277px;
  height: 280px;
}
.zuopin li p {
  margin: 10px;
  font-size: 16px;
  white-space: nowrap;
  overflow: hidden;
  color: #dd3915;
  cursor: pointer;
}
.zuopin li p:hover {
  background-color: #dd3915;
  color: white;
}
.zuopin li .tip {
  color: #333;
  margin: 10px;
  height: 63px;
  overflow: hidden;
}
.zuopin li .bot span {
  font-size: 12px;
  color: #909090;
}
.zuopin li .bot span:nth-child(1) {
  margin: 0 125px 0 10px;
}
.zuopin li .bot span:nth-child(2) {
  margin-right: 20px;
}
</style>